<template>
  <div class="login-container" :class="[theme]">
    <!-- 顶部标题区域 -->
    <div class="header">
      <h1 class="main-title">像法币一样使用</h1>
      <h2 class="sub-title">加密货币</h2>
      <p class="description">随时随地充分利用您加密货币的卡片</p>
    </div>

    <!-- 广告横幅 -->
    <div class="banner">
      <div class="banner-content">
        <div>
          <p class="banner-title">Earn high returns on idle funds</p>
          <p class="banner-subtitle">Yu'ebao is launched</p>
        </div>
        <div class="banner-icon">
          <div class="planet"></div>
        </div>
      </div>
    </div>

    <!-- 登录表单 -->
    <h3 class="login-title">账户登录</h3>
    
    <div class="form-item">
      <Input
        id="email"
        v-model="email"
        type="email"
        placeholder="请输入邮箱"
        label="邮箱"
        :error="errorMessage"
        @blur="validateInput"
        clearable
      />
    </div>
    
    <div class="form-item">
      <div class="password-input">
        <Input
          id="password"
          label="密码"
          v-model="password"
          :type="showPassword ? 'text' : 'password'"
          placeholder="请输入密码"
          :iconName="showPassword ? 'icon-eye' : 'icon-eye-off-'"
          @handleClick="togglePasswordVisibility"
        />
      </div>
    </div>

    <!-- 按钮组 -->
    <div class="button-group w-full">
      <MyButton class="py-2 w-full" type="orange" text="登录" @click="handleLogin" />
      <div class="secondary-buttons">
        <button class="register-button" @click="goToRegister">立即注册</button>
        <button class="forgot-button" @click="goToForgotPassword">忘记密码</button>
      </div>
    </div>

    <!-- 底部卡片信息 -->
    <div class="card-info">
      <div class="card-icon">
        <span>💳</span>
      </div>
      <div class="card-text">
        <h4>跨境数字信用卡</h4>
        <p>200+的国家和40+的当地货币，支持全球近300万个接受VISA的ATM，可以轻松应对全球各类消费场景。</p>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { useUserStore } from '../store/user';
import { post } from '../utils/request';
import MyButton from '../components/common/MyButton.vue';
import { useAppStore } from '../store/app'
import { storeToRefs } from 'pinia';
const { theme } = storeToRefs(useAppStore());

const router = useRouter()
const userStore = useUserStore()
const errorValue = ref("")
const errorMessage = ref("")
const email = ref('')
const password = ref('')
const showPassword = ref(false)

const validateInput = () => {
  if (errorValue.value.toLowerCase() === 'error') {
    errorMessage.value = '不能输入 "error" 作为内容'
  } else {
    errorMessage.value = ''
  }
}
// 切换密码可见性
const togglePasswordVisibility = () => {
  showPassword.value = !showPassword.value
}
// 模拟登录请求
const handleLogin = async () => {
  if (!email.value || !password.value) {
    alert('请输入邮箱和密码')
    return
  }
  
  try {
    // 实际项目中，这里应该调用真实的登录API
    // const res = await post('/api/login', {
    //   email: email.value,
    //   password: password.value
    // })
    
    // 模拟登录成功
    const mockLoginResponse = {
      token: 'mock-token-' + Date.now(),
      userInfo: {
        id: 1,
        email: email.value,
        name: '测试用户',
        avatar: 'https://placeholder.com/150'
      }
    }
    
    // 保存登录信息
    userStore.login(mockLoginResponse)
    
    // 跳转到首页
    router.push('/')
  } catch (error) {
    console.error('登录失败:', error)
    alert('登录失败，请重试')
  }
}

// 跳转到注册页面
const goToRegister = () => {
  router.push('/register')
}

// 跳转到忘记密码页面
const goToForgotPassword = () => {
  router.push('/forgot-password')
}
</script>

<style scoped lang="scss">
.login-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  padding: 20px;
  background-size: 100% 100%;
  &.dark {
    color: #fff;
    background-image: url('../assets/imgs/images/index_bg_register_dark.png');
  }
  &.light {
    color: #000;
    background-image: url('../assets/imgs/images/index_bg_register_light.png');
  }
}

.header {
  margin-top: 40px;
  margin-bottom: 20px;
}

.main-title {
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 8px;
}

.sub-title {
  font-size: 32px;
  font-weight: bold;
  color: #FFD700;
  margin-bottom: 12px;
}

.description {
  font-size: 16px;
  color: #aaa;
  margin-bottom: 24px;
}

.banner {
  background-color: #111;
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 40px;
}

.banner-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.banner-title {
  font-size: 18px;
  color: #FFD700;
  margin-bottom: 4px;
}

.banner-subtitle {
  font-size: 14px;
  color: #aaa;
}

.banner-icon {
  width: 50px;
  height: 50px;
  position: relative;
}

.planet {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #FF6B6B, #FFD700);
  border-radius: 50%;
  position: relative;
}

.planet::after {
  content: '';
  position: absolute;
  width: 120%;
  height: 30%;
  border: 2px solid rgba(255, 215, 0, 0.5);
  border-radius: 50%;
  top: 35%;
  left: -10%;
  transform: rotate(-15deg);
}

.login-title {
  font-size: 24px;
  margin-bottom: 24px;
}

.form-item {
  margin-bottom: 20px;
}

.password-input {
  position: relative;
}

.eye-icon {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  color: #666;
  font-size: 20px;
}

.button-group {
  margin-top: 30px;
}

.login-button {
  width: 100%;
  padding: 16px;
  background-color: #F5D0A9;
  color: #000;
  border: none;
  border-radius: 8px;
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
  margin-bottom: 16px;
}

.secondary-buttons {
  display: flex;
  justify-content: space-between;
}

.register-button, .forgot-button {
  padding: 12px 20px;
  background-color: #A0522D;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
  width: 48%;
}

.card-info {
  margin-top: 40px;
  background-color: #111;
  border-radius: 16px;
  padding: 20px;
  display: flex;
  align-items: center;
}

.card-icon {
  font-size: 36px;
  margin-right: 16px;
  color: #4DA6FF;
}

.card-text h4 {
  font-size: 18px;
  margin-bottom: 8px;
}

.card-text p {
  font-size: 14px;
  color: #aaa;
  line-height: 1.5;
}
</style>